@import "src/css/mixin";

#RechargeModal {
    .recharge-content{
        position: relative;
        background-image: linear-gradient(-200deg, #FFF1B6 0%, #C8BE6B 100%);
        border-radius: 2px;
        padding: .3rem .2rem .25rem .2rem;
        text-align: center;

        .title{
            font-size: .25rem;
            color: #B19510;
            letter-spacing: 0;
            line-height: .25rem;
            font-weight: 600;
            margin-bottom: .1rem;
        }

        p{
            font-size: .12rem;
            color: #B19510;
            letter-spacing: 0;
            line-height: .12rem;
            margin-bottom: .27rem;
        }

        img{
            position: relative;
            left: .35rem;
            height: .4rem;
            width: 1.03rem;
        }

        .btn{
            width: 100%;
            height: .5rem;
            font-size: .16rem;
            color: #FFFFFF;
            letter-spacing: 0;
            background: #B19510;
            box-shadow: 0 0 4px 0 rgba(177,149,16,0.50);
            border-radius: .5rem;
        }
        .btn:hover, .btn:focus, .btn:active, .btn:hover:focus{
            border: none;
            outline: none;
        }
    }
    /** =====range样式===== */
    .scroll-bar{
        padding: 0 .13rem;
    }
    .range-pane{
        position: relative;
        margin-bottom: .5rem;

        .blue-cover{
            position: absolute;
            top: 0;
            left: 0;
            width: 19%;
            height: 8px;
            border-radius: 8px;
            background-color: #B19510;
            z-index: 1;
        }
        .origin{
            position: absolute;
            top: -7px;
            left:0;
            display:block;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            box-shadow: 0 0 0 1px #B19510;
            border: 3px solid #fff;
            background-color: #B19510;
            z-index: 3;
        }
        .origin-value{
            font-size: .12rem;
        }
        .change-value{
            position: absolute;
            font-size: .12rem;
            left: 11%;
            color: #FFFFFF;
            width: .46rem;
        }
        .half-point{
            top: -.3rem;
            background: #b19510;
            border-radius: 50px 50px 50px;
            line-height: 1.5;
            width: .5rem;
        }
        .horn {
            width: .1rem;
            height: .08rem;
            bottom: -0.05rem;
            @include behavior("/img/pack/hron.png");
            background-size: 100%;
            position: absolute;
            right: .18rem;
        }
    }
    /** =====修改默认的浏览器range样式===== */
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        border-radius: 8px; /*这个属性设置使填充进度条时的图形为圆角*/
        &:focus {
        outline: none;
        }
        margin-bottom: .15rem;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
        height: 8px;
        border-radius: 10px; /*将轨道设为圆角的*/
        background-color: #FFFFFF;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 18px;
        width: 18px;
        margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
        border-radius: 50%; /*外观设置为圆形*/
        box-shadow: 0 0 0 1px #B19510;
        border: 3px solid #fff;
        background-color: #B19510;
        position: relative;
        z-index: 2;
    }
}